<template>
  <section class="inner-tab-container">
    <p class="title">{{ t('news') }}</p>
    <div class="news-container">
      <van-steps direction="vertical" :active="0" active-color="#fff">
        <van-step v-for="(item, index) in list" :key="item.uuid || index">
          <p class="time">{{ item.createTime }}</p>
          <p class="context">{{ item.description }}</p>
        </van-step>
        <van-step>
          <p class="time">2023-06-15 11:30</p>
          <p class="context">南非汇市：兰特兑美元走高，美国通胀报告发布后美元跌至约两周地点</p>
        </van-step>
        <van-step>
          <p class="time">2023-06-14 14:20</p>
          <p class="context">降息预期遭重挫败！CPI环比增速抬头 美联储抗通胀之路注定崎岖</p>
        </van-step>
      </van-steps>
    </div>
  </section>
</template>
    
<script setup>
import { ref, onMounted } from 'vue';
import { _getInformationList } from '@/service/etf.api'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()
const list = ref([])

onMounted(async () => {
  getInformationList()
})

const getInformationList = () => {
  _getInformationList().then(data => {
    list.value = data
  })
}


</script>
<style lang="scss" scoped>
:deep(.van-steps) {
  background: $selectSymbol_background;

  .van-step__title {
    color: $text_color;

    .time {
      color: #747A8F;
      margin: 5px 0;
    }

  }

  .van-step__line {
    background-color: $border_color;
  }

  .van-icon-checked::before {
    content: '';
    background-color: #3478F6;
    width: 6px;
    height: 6px;
    box-shadow: 0 0 0px 4px #15284F;
    border-radius: 50%;
  }

  .van-step__circle {
    background-color: #3478F6;
    width: 6px;
    height: 6px;
    box-shadow: 0 0 0px 4px #15284F;
  }

  .van-step--vertical:not(:last-child):after {
    border-bottom-width: 1px;
    border-color: $border_color;
  }
}

.inner-tab-container {
  margin-top: 8px;
  padding: 0 12px 60px;

  .title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
  }

  .news-container {}
}
</style>